<template>
  <div class="index">
    <div class="search">
      <div class="top">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          input-align="center"
          background="#3194ff"
          shape="round"
          @click="$router.push('/search')"
        >
          <template #left>
            <van-icon name="wap-nav" @click="show = true" class="more" />
          </template>
        </van-search>
      </div>
    </div>
    <van-tabs v-model="active" swipeable animated @change="getItemId">
      <van-tab
        v-for="(item, index) in myTagList"
        :title="item.name"
        :key="index"
        :name="item.id"
        class="indexes"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="0"
          class="big"
        >
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div v-for="(item, index) in articles" :key="index">
              <div class="article" v-if="item.cover.images.length === 0">
                <div
                  class="title"
                  @click="$router.push(`/detail/${item.art_id}`)"
                >
                  {{ item.title }}
                </div>
                <div class="bottom">
                  <span class="user">{{ item.aut_name }}</span>
                  <span class="comment">{{ item.comm_count }}评论</span>
                  <span class="time">{{ item.pubdate | hmfilter }}</span>
                  <van-icon name="cross" class="del" @click="openPop(item)" />
                </div>
              </div>
              <div class="article" v-else-if="item.cover.images.length === 3">
                <div
                  class="title"
                  @click="$router.push(`/detail/${item.art_id}`)"
                >
                  {{ item.title }}
                </div>
                <div class="img">
                  <img :src="item.cover.images[0]" alt="" />
                  <img :src="item.cover.images[1]" alt="" />
                  <img :src="item.cover.images[2]" alt="" />
                </div>
                <div class="bottom">
                  <span class="user">{{ item.aut_name }}</span>
                  <span class="comment">{{ item.comm_count }}评论</span>
                  <span class="time">{{ item.pubdate | hmfilter }}</span>
                  <van-icon name="cross" class="del" @click="openPop(item)" />
                </div>
              </div>
              <div class="article" v-else-if="item.cover.images.length === 1">
                <div class="left">
                  <div
                    class="title"
                    @click="$router.push(`/detail/${item.art_id}`)"
                  >
                    {{ item.title }}
                  </div>
                  <img :src="item.cover.images[0]" alt="" />
                </div>
                <div class="bottom">
                  <span class="user">{{ item.aut_name }}</span>
                  <span class="comment">{{ item.comm_count }}评论</span>
                  <span class="time">{{ item.pubdate | hmfilter }}</span>
                  <van-icon
                    name="cross"
                    class="del"
                    @click="openPop(item)"
                    round
                  />
                </div>
              </div>
            </div>
          </van-pull-refresh>
        </van-list>
      </van-tab>
    </van-tabs>
    <!-- 频道 -->
    <van-popup
      round
      v-model="show"
      position="bottom"
      :style="{ height: '80%' }"
      class="popup"
    >
      <van-icon name="cross" class="cancel" @click="show = false" />
      <div class="my-channel">
        <div class="channel">
          <span class="my">我的频道</span>
          <span class="compile" v-if="ifShow" @click="editor">编辑</span>
          <span class="compile" v-else @click="complete">完成</span>
        </div>
        <div class="myTag">
          <div
            class="my-tag"
            @click="getItemId(0)"
            :class="{ active: 0 === id }"
          >
            推荐
          </div>
          <div
            class="my-tag"
            :class="{ active: item.id === id }"
            v-for="(item, index) in myTagList.slice(1)"
            :key="index"
            @click="getItemId(item.id)"
          >
            {{ item.name }}
            <van-icon
              name="clear"
              class="fork"
              v-if="myshow"
              @click.stop="delList(item, index)"
            />
          </div>
        </div>
      </div>
      <div class="recommend">
        <div class="channel">
          <span class="my">频道推荐</span>
        </div>
        <div class="myTag">
          <div
            class="my-tag"
            v-for="(item, index) in tagList"
            :key="index"
            @click="getItemId(item.id)"
          >
            {{ item.name }}
            <van-icon
              name="add"
              v-if="myshow"
              class="add"
              @click.stop="getlist(item, index)"
            />
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 文章处理 -->
    <van-popup v-model="noLike" class="report">
      <div class="cell">
        <van-cell-group v-if="link === false">
          <van-cell
            size="large"
            title="不感兴趣"
            icon="bill-o"
            @click="dislikes"
          />
          <van-cell
            size="large"
            title="反馈垃圾内容"
            icon="warn-o"
            is-link
            @click="link = true"
          />
          <van-cell
            size="large"
            title="拉黑作者"
            icon="delete-o"
            @click="blacklists"
          />
        </van-cell-group>
        <van-cell-group v-else>
          <van-cell size="large" @click="link = false">
            <template #title>
              <i class="iconfont icon-arrow-left-bold"></i>
            </template>
          </van-cell>
          <van-cell
            size="large"
            v-for="(value, key) in typeObj"
            :key="key"
            @click="reportArticle(key)"
          >
            <template #title>
              <div>{{ value }}</div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  getTagApi,
  getArticlesApi,
  // getArtApi,
  getUserTagApi,
  putUserTagApi,
  reportArticleApi,
  noLikeArticleApi,
  blockUserApi
} from '@/Api/home'
export default {
  data () {
    return {
      time: '',
      value: '',
      id: 0,
      total: 0,
      active: 0,
      delShow: false,
      tagList: [],
      myTagList: [],
      articles: [],
      show: false,
      ifShow: true,
      myshow: false,
      loading: false,
      isLoading: false,
      finished: false,
      link: false,
      // 点击不喜欢按钮存入的文章信息数据
      myArticle: '',
      // 文章违规类型
      typeObj: {
        0: '其他问题',
        1: '标题夸张',
        2: '低俗涩情',
        3: '错别字多',
        4: '旧闻重复',
        5: '广告软文',
        6: '内容不实',
        7: '涉嫌违法犯罪',
        8: '侵权'
      },
      // 控制不喜欢按钮弹出层
      noLike: false,
      isStatus: false
    }
  },
  created () {
    this.time = new Date().getTime()
    this.getTag()
    this.onLoad()
    this.userTag()
  },
  methods: {
    // change
    changes (name, title) {
      this.id = name
      console.log(this.id)
    },
    async getTag () {
      const res = await getTagApi()
      this.tagList = res.data.data.channels
      setTimeout(() => {
        var arr = this.tagList.filter(item => {
          return !this.myTagList.some(itemB => itemB.id === item.id)
        })
        this.tagList = arr
      }, 1000)
    },
    // 加载数据
    async onLoad () {
      this.finished = false
      // setTimeout(async () => {
      var res
      this.time = new Date().getTime()
      res = await getArticlesApi({
        channel_id: this.id,
        timestamp: this.time,
        with_top: 0
      })
      console.log(res)
      this.articles.push(...res.data.data.results)
      this.loading = false
      this.total = res.data.data.total_count
      if (this.articles.length >= 1000 || this.articles.length === 0) {
        this.finished = true
      }
      this.isLoading = false
      // }, 300)
    },
    // 添加标签
    getlist (data, index) {
      this.myTagList.push(data)
      this.tagList.splice(index, 1)
    },
    // 产出标签
    delList (data, index) {
      this.tagList.push(data)
      this.myTagList.splice(index + 1, 1)
    },
    async userTag () {
      const res = await getUserTagApi()
      this.myTagList = res.data.data.channels
    },
    // 编辑按钮
    editor () {
      this.ifShow = false
      this.myshow = true
    },
    // 完成按钮
    async complete () {
      this.ifShow = true
      this.myshow = false
      this.myTagList.forEach((item, index) => {
        item.seq = index + 1
      })
      const data = this.myTagList.slice(1).map(item => {
        return { id: item.id, seq: item.seq }
      })
      const res = await putUserTagApi({
        channels: data
      })
      console.log(res)
    },
    getItemId (id) {
      this.id = id
      this.active = id
      this.articles = []
      this.isStatus = true
      this.onLoad()
      // this.finished = false
      // console.log(123)
    },
    // 点叉叉
    openPop (item) {
      this.noLike = true
      this.link = false
      this.myArticle = item
      console.log(item)
    },
    // 不喜欢文章
    async dislikes () {
      const res = await noLikeArticleApi({
        target: this.myArticle.art_id
      })
      if (res.data.message === 'OK') {
        this.$toast.success('操作成功')
        // 删除不喜欢的
        console.log(this.articles)
        const num = this.articles.indexOf(this.myArticle)
        console.log(num)
        this.articles.splice(num, 1)
        this.noLike = false
      }
    },
    // 拉黑作者
    async blacklists () {
      this.$toast.loading('请稍后')
      const res = await blockUserApi({
        target: this.myArticle.aut_id
      })
      if (res.data.message === 'OK') {
        this.$toast.success('拉黑成功')
        this.noLike = false
      }
      // console.log(this.myArticle.aut_id)
    },
    // 举报文章
    async reportArticle (data) {
      const res = await reportArticleApi({
        target: this.myArticle.art_id,
        type: +data
      })
      if (res.data.message === 'OK') {
        this.$toast.success('反馈成功')
        // 删除不喜欢的
        const num = this.articles.indexOf(this.myArticle)
        // console.log(num)
        this.articles.splice(num, 1)
        this.noLike = false
      }
      // console.log(res)
    },
    // 下拉刷新
    onRefresh () {
      this.articles = []
      this.onLoad()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ input.van-field__control.van-field__control--center {
  padding-right: 20px;
}
/deep/ .van-tabs__wrap.van-tabs__wrap--scrollable {
  position: fixed;
  top: 1.22667rem;
  left: 0;
  width: 100%;
  z-index: 999;
}
/deep/ .van-tabs__wrap {
  position: fixed;
  top: 1.22667rem;
  left: 0;
  width: 100%;
  z-index: 999;
}
.index {
  // position: relative;
  .search {
    margin-bottom: 42px;
    .top {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 99999;
      // height: 48px;
      // background-color: #3296fa;
      // overflow: hidden;
      .more {
        color: white;
        padding-right: 10px;
        img {
          width: 20px;
          height: 17px;
        }
      }
      .search-box {
        display: flex;
        width: 278px;
        height: 32px;
        background-color: #5babfb;
        border-radius: 16px;
        margin: 10px auto;
        color: #ffffff;
        justify-content: center;
        align-items: center;
        .text {
          font-size: 14px;
        }
        .icon {
          font-size: 18px;
        }
      }
    }
  }
  .tag {
    width: 90%;
    height: 42px;
    font-size: 14px;
    background-color: #fff;
    display: flex;
    position: relative;
    // position: fixed;
    // left: 0;
    // top: 48px;
    overflow-x: auto;
    overflow-y: auto;
    border-bottom: 1px solid #edeff3;
    .indexes {
      // width: 96px;
      // flex-shrink: 0;
      // flex: 1;
      position: absolute;
      top: 100px;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 42px;
      border-right: 1px solid #edeff3;
      flex-shrink: 0;
    }
  }
  .big {
    margin-top: 45px;
    padding-bottom: 100px;
    .article {
      display: flex;
      flex-direction: column;
      padding: 0 12px 15px;
      border-bottom: 1px solid #edeff3;
      .title {
        text-overflow: ellipsis;
        overflow: hidden;
        flex: 1;
        font-size: 16px;
        color: #3a3a3a;
        margin-top: 14px;
      }
      .img {
        margin-top: 15px;
        img {
          width: 116px;
          height: 73px;
          margin-right: 1px;
        }
      }
      .bottom {
        display: flex;
        margin-top: 10px;
        .stick {
          font-size: 12px;
          color: #e22829;
        }
        span {
          font-size: 12px;
          color: #999999;
          margin-right: 10px;
        }
        .user {
          flex: 0.2;
        }
        .comment {
          flex: 0.2;
        }
        .time {
          flex: 1;
        }
        .del {
          position: static;
          font-size: 12px;
        }
      }
      .left {
        display: flex;
        img {
          flex-direction: row;
          width: 116px;
          height: 73px;
          margin-right: 1px;
          margin-top: 15px;
        }
      }
    }
  }
  .popup {
    padding: 12px;
    font-size: 16px;
    box-sizing: border-box;
    .cancel {
      padding: 3px;
    }
    .channel {
      margin-top: 26px;
      display: flex;
      .my {
        flex: 1;
      }
      .compile {
        width: 50px;
        height: 25px;
        font-size: 12px;
        text-align: center;
        line-height: 25px;
        margin: 0 auto;
        color: rgb(250, 127, 127);
        border: 1px solid rgb(250, 127, 127);
        border-radius: 15px;
      }
    }
    .myTag {
      display: flex;
      flex-wrap: wrap;
      .my-tag {
        position: relative;
        flex-wrap: wrap;
        font-size: 12px;
        width: 80px;
        height: 43px !important;
        margin-top: 24px;
        margin-right: 7px;
        text-align: center;
        line-height: 43px;
        background-color: #f4f5f6;
        .fork {
          font-size: 16px;
          position: absolute;
          top: -3px;
          right: -3px;
          color: rgb(148, 148, 148);
          // display: none;
        }
        .add {
          font-size: 16px;
          position: absolute;
          top: -3px;
          right: -3px;
          color: rgb(148, 148, 148);
        }
      }
    }
  }
}
.active {
  color: #ff2020;
}
.report {
  width: 80%;
  border-radius: 10px;
}
</style>
